# Quote Module Collection

Custom-coded HubSpot CPQ quote modules created by [worksby.design](https://worksby.design).

---

## Requirements

- HubSpot CMS Hub (Professional or Enterprise)
- [HubSpot CLI](https://developers.hubspot.com/docs/cms/developer-reference/local-development-cli) installed and authenticated to your portal

---

## Installation

From inside this folder, run:

```bash
hs project upload
```

The modules will be available in the Quote Template editor immediately after upload.

---

## Modules

| Module | Purpose |
|---|---|
| **Quote Header** | Formal document header — logo, quote reference, issue and expiry dates, prepared for/by |
| **Quote Cover** | Branded hero section — buyer company name, quote title, sender card, status badge, expiry countdown |
| **Quote Navigation** | Sticky section navigation bar — auto-discovers sections from other modules |
| **Quote Introduction** | Executive summary — editable message, optional video embed, sender bio card |
| **Quote Line Items** | Custom line items table — SKU-based filtering, recurring billing badges, subtotal row |
| **Quote Products Anchor** | Zero-height anchor — only needed when using HubSpot's built-in line items module instead of Quote Line Items |
| **Quote Pricing Summary** | Subtotal, discount, tax, and total; payment terms and accepted payment methods |
| **Quote Timeline** | "What happens next" — configurable post-signing milestones |
| **Quote Terms** | Terms & conditions sections — collapsible on web, fully expanded in PDF |
| **Quote Signature** | Signer status cards, sign CTA button, PDF signature lines, accepted banner |
| **Fancy Example** | Developer reference module — demonstrates every field type and layout pattern |
| **Debug: Quote Context** | Developer utility — dumps live quote data as JSON for inspection; remove before going live |

---

## Recommended module order

### With Quote Line Items (recommended)

```
Quote Header
Quote Cover
Quote Navigation
Quote Introduction
Quote Line Items
Quote Pricing Summary
Quote Timeline
Quote Terms
Quote Signature
```

### With HubSpot's built-in line items module

```
Quote Header
Quote Cover
Quote Navigation
Quote Introduction
Quote Products Anchor    ← place immediately above the built-in line items module
[HubSpot line items module]
Quote Pricing Summary
Quote Timeline
Quote Terms
Quote Signature
```

---

## Brand colours

All modules read your primary brand colour automatically from your HubSpot brand kit (`brand_settings.primaryColor`). No manual configuration is needed.

To override the colour for a specific module, set the **Primary colour** field in that module's style settings.

---

## SKU filtering (Quote Line Items)

You can place multiple Quote Line Items modules on a single template and filter each one by SKU prefix:

- **Include only — SKU starts with**: only shows items whose SKU matches one of the listed prefixes (comma-separated)
- **Exclude — SKU starts with**: hides items whose SKU matches any of the listed prefixes

Example — split a quote into two tables:

```
Quote Line Items  heading="Software"          includeSkuPrefixes="sw-"
Quote Line Items  heading="Professional Services"  includeSkuPrefixes="svc-"
```

Set **Register as Products nav anchor** to `true` on the first table only.

---

## PDF behaviour

All modules render a fully readable static version for PDF export. Interactive features (countdown timer, sticky nav, accordion terms, sign button) are web-only enhancements layered on top — they do not affect the PDF.

Quote Navigation is hidden entirely in PDF output.

---

## Support

Questions or issues? Reach us at [hello@worksby.design](mailto:hello@worksby.design) or visit [worksby.design](https://worksby.design).
